<template>
  <div>
    <ul v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loadable"
        infinite-scroll-distance="30">
      <li v-for="item in floors">
        <floor :floor="item"></floor>
        <hr class="separate-line">
      </li>
      <li v-show="loading !== 'loaded'" style="text-align: center; padding: 5px 0;">
        <span class="mint-indicator-spin">
          <div class="mint-spinner-snake"
               style="border-top-color: rgb(204, 204, 204);
                border-left-color: rgb(204, 204, 204);
                border-bottom-color: rgb(204, 204, 204);
                height: 25px; width: 25px;">
          </div>
        </span>
      </li>
      <li v-show="loading === 'loaded'" style="text-align: center; padding: 10px 0;color: #a9acb1;font-size: 13px;">
        没有更多了
      </li>
    </ul>
  </div>
</template>

<script>
  import Floor from '@/components/Floor'

  export default {
    name: "floorList",
    components: {Floor},
    data() {
      return {
        loading: 'preload',
        floors: [
          {
            username: '吴老板',
            level: 13,
            floorNo: 1,
            date: '2018-2-9 11:10',
            content: 'Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。'
          },
          {
            username: '吴老板',
            level: 13,
            floorNo: 1,
            date: '2018-2-9 11:10',
            content: 'Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。'
          },
          {
            username: '吴老板',
            level: 13,
            floorNo: 1,
            date: '2018-2-9 11:10',
            content: 'Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。'
          },
          {
            username: '吴老板',
            level: 13,
            floorNo: 1,
            date: '2018-2-9 11:10',
            content: 'Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。'
          },
          {
            username: '吴老板',
            level: 13,
            floorNo: 1,
            date: '2018-2-9 11:10',
            content: 'Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。'
          },
          {
            username: '吴老板',
            level: 13,
            floorNo: 1,
            date: '2018-2-9 11:10',
            content: 'Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。'
          },
          {
            username: '吴老板',
            level: 13,
            floorNo: 1,
            date: '2018-2-9 11:10',
            content: 'Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。'
          },
          {
            username: '吴老板',
            level: 13,
            floorNo: 1,
            date: '2018-2-9 11:10',
            content: 'Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。'
          },
          {
            username: '吴老板',
            level: 13,
            floorNo: 1,
            date: '2018-2-9 11:10',
            content: 'Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。'
          },

        ]
      }
    },
    props: ['keyword'],
    methods: {
      loadMore() {
        this.loading = 'loading'
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.floors.push({
              username: '吴老板',
              level: 13,
              floorNo: 1,
              date: '2018-2-9 11:10',
              content: 'Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。'
            })
          }
          this.loading = 'preload'
        }, 2000)
      }
    },
    computed: {
      loadable() {
        return this.loading === 'loading' || this.loading === 'loaded'
      }
    }
  }
</script>

<style scoped>
  .separate-line {
    height: 1px;
    border-top: 1px solid #C5C9CD;
    border-bottom: none;
    border-left: none;
    border-right: none;
    width: 95%;
    margin: auto;
  }
</style>
